
<div class="row">
      <div class="col-lg-8 col-lg-push-2">
        <form class="form form-horizontal" [formGroup]="menuForm" >
          <input type="hidden" id="menu_add_pId" formControlName="pId" name="pId">
          <div class="one-form-header"></div>
          <div class="one-form-body">
            <div class="row">
              <div class="col-sm-4">
                <div id="menu_add_ZTree" class="ztree"></div>
              </div>
              <div class="col-sm-8">
                <div class="form-group">
                  <label for="menu_add_pName" class="col-sm-3 control-label" >父菜单</label>
                  <div class="col-sm-9">
                    <input type="text" class="form-control" placeholder="父菜单名" id="menu_add_pName" formControlName="pName" maxlength="30" readonly>
                    <div *ngIf="formErrors.pName" class="has-error">
                      <label class="control-label"><i class="fa fa-times-circle-o"></i>{{formErrors.pName}} </label>
                    </div>
                  </div>
                </div>
                <div class="form-group">
                  <label for="menu_add_name" class="col-sm-3 control-label" ><span style="color: red;">*</span> 名称</label>
                  <div class="col-sm-9">
                    <input type="hidden" id="id" formControlName="id" name="id">
                    <input type="text" class="form-control" placeholder="菜单名" id="menu_add_name" required formControlName="name" maxlength="30">
                    <div *ngIf="formErrors.name" class="has-error">
                      <label class="control-label"><i class="fa fa-times-circle-o"></i>{{formErrors.name}} </label>
                    </div>
                  </div>
                </div>
                <div class="form-group">
                  <label for="menu_add_order" class="col-sm-3 control-label" ><span style="color: red;">*</span> 顺序:</label>
                  <div class="col-sm-9">
                    <input type="text" class="form-control" placeholder="顺序" id="menu_add_order" required formControlName="orderBy" >
                    <div *ngIf="formErrors.orderBy" class="has-error">
                      <label class="control-label"><i class="fa fa-times-circle-o"></i>{{formErrors.orderBy}} </label>
                    </div>
                  </div>
                </div>
                <div class="form-group">
                  <label for="menu_add_encode" class="col-sm-3 control-label" >菜单编码</label>
                  <div class="col-sm-9">
                    <input type="text" class="form-control" placeholder="菜单编码" id="menu_add_encode" formControlName="menuCode" >
                    <div *ngIf="formErrors.menuCode" class="has-error">
                      <label class="control-label"><i class="fa fa-times-circle-o"></i>{{formErrors.menuCode}} </label>
                    </div>
                  </div>
                </div>
                <div class="form-group">
                  <label class="col-sm-3 control-label" >图标样式:</label>
                  <div class="col-sm-9">
                    <input type="text" class="form-control" placeholder="图标" id="menu_add_css" name="cssName" formControlName="cssName">
                    <div *ngIf="formErrors.cssName" class="has-error">
                      <label class="control-label"><i class="fa fa-times-circle-o"></i>{{formErrors.cssName}} </label>
                    </div>
                  </div>
                </div>
                <div class="form-group">
                  <label class="col-sm-3 control-label" ><span style="color: red;">*</span> 类型:</label>
                  <div class="col-sm-9">
                    <select class="multiselect form-control" id="customer_add_duty" formControlName="type" required>
                      <!--<option *ngFor="let state of states" [value]="state">{{state}}</option>-->
                      <!-- value="0" 表示默认选中 -->
                      <option value="0">子系统</option>
                      <option value="1">目录</option>
                      <option value="2">页面</option>
                    </select>
                  </div>
                </div>
                <div class="form-group">
                  <label class="col-sm-3 control-label">存在URL:</label>
                  <div class="col-sm-9">
                    <div class="row">
                      <div class="col-xs-4">
                        <input type="radio" name="isExistUrl" id="menu_add_exist_url" value="1" formControlName="isExistUrl">
                        <label for="menu_add_exist_url">
                          是
                        </label>
                      </div>
                      <div class="col-xs-4">
                        <input type="radio" name="isExistUrl" id="menu_add_inExist_url" value="0" formControlName="isExistUrl">
                        <label for="menu_add_inExist_url">
                          否
                        </label>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="form-group">
                  <label class="col-sm-3 control-label">打开空白页:</label>
                  <div class="col-sm-9">
                    <div class="row">
                      <div class="col-xs-4">
                        <input type="radio" name="isBlank" id="menu_add_blank" value="1" formControlName="isBlank">
                        <label for="menu_add_blank">
                          是
                        </label>
                      </div>
                      <div class="col-xs-4">
                        <input type="radio" name="isBlank" id="menu_add_self" value="0" formControlName="isBlank">
                        <label for="menu_add_self">
                          否
                        </label>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="form-group">
                  <label class="col-sm-3 control-label">外部链接:</label>
                  <div class="col-sm-9">
                    <div class="row">
                      <div class="col-xs-4">
                        <input type="radio" name="isExternal" id="menu_add_external" value="1" formControlName="isExternal">
                        <label for="menu_add_External">
                          是
                        </label>
                      </div>
                      <div class="col-xs-4">
                        <input type="radio" name="isExternal" id="menu_add_external_url" value="0" formControlName="isExternal">
                        <label for="menu_add_external_url">
                          否
                        </label>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="row">
                  <label class="col-sm-3 control-label" >是否显示:</label>
                  <div class="col-sm-9" >
                    <div class="row">
                      <div class="col-xs-4">
                        <input type="radio" name="isDisplay" id="menu_add_hide" value="1" formControlName="isDisplay">
                        <label for="menu_add_hide">
                          是
                        </label>
                      </div>
                      <div class="col-xs-4">
                        <input type="radio" name="isDisplay" id="menu_add_show"  value="0" formControlName="isDisplay">
                        <label for="menu_add_show">
                          否
                        </label>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="row">
                  <label class="col-sm-3 control-label" >是否启用:</label>
                  <div class="col-sm-9" >
                    <div class="row">
                      <div class="col-xs-4">
                        <input type="radio" name="isEnable" id="menu_add_valid" value="1" formControlName="isEnable">
                        <label for="menu_add_valid">
                          是
                        </label>
                      </div>
                      <div class="col-xs-4">
                        <input type="radio" name="isEnable" id="menu_add_invalid"  value="0" formControlName="isEnable">
                        <label for="menu_add_invalid">
                          否
                        </label>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="form-group" *ngIf="menuForm.value.isExistUrl=='1'">
                  <label for="menu_add_linkAddr" class="col-sm-3 control-label">链接</label>
                  <div class="col-sm-9">
                    <input type="text" class="form-control" placeholder="链接地址" id="menu_add_linkAddr" formControlName="url" >
                    <div *ngIf="formErrors.url" class="has-error">
                      <label class="control-label"><i class="fa fa-times-circle-o"></i>{{formErrors.url}} </label>
                    </div>
                  </div>
                </div>
                <div class="row">
                  <label for="menu_add_comment" class="col-sm-3 control-label" >备注:</label>
                  <div class="col-sm-9">
                    <textarea rows="2" cols="20" style="width:100%" id="menu_add_comment" name="remark" formControlName="remark"></textarea>
                    <div *ngIf="formErrors.remark" class="has-error">
                      <label class="control-label"><i class="fa fa-times-circle-o"></i>{{formErrors.remark}} </label>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="one-form-footer">
            <div class="pull-right">
              <button class="btn btn-default" type="reset" (click)="cancelMenuAdd()">取消</button>
              <button class="btn btn-success" type="button" [disabled]="menuForm.invalid" (click)="onSubmit()">提交</button>
            </div>
          </div>
        </form>
      </div>
    </div>
